<template>
  <view class="pages">
    <view class="title-tips"> 办理7迈车全球洗车, 全年预计最高可省30000元 </view>
    <view class="title">
      <image class="image" :src="cavansData.titleImg" mode="scaleToFill" />
    </view>

    <view class="card">
      <view class="card-footer flex flex-ai-bl flex-jc-fe">
        <image class="images" :src="cavansData.vipIcon" mode="scaleToFill" />
        <text class="text"
          >年卡会员:<text class="through-line">{{
            cavansData.cardData
          }}</text></text
        >
        <text class="font-46">{{ cavansData.cardPrice }}</text>
      </view>
    </view>
    <view class="vip">
      <image class="img" :src="cavansData.title2Img" mode="scaleToFill" />
    </view>
    <view>
      <image class="ad-img" :src="cavansData.adImg" mode="scaleToFill" />
    </view>
    <view class="ad">
      <view class="flex flex-jc-sb flex-ai-c">
        <view class="font-34 font-bold">卫莱士净水器免费送</view>
        <view class="font-24 color-fff"
          >剩余<text class="color-FF2929">{{ cavansData.number }}</text
          >/10000</view
        >
      </view>
      <view class="font-24 ad-sub">仅限前一万名，送完即止</view>
    </view>
    <view class="vip-list">
      <view class="flex item">
        <image class="item-img" :src="cavansData.icon1Img" mode="scaleToFill" />
        <view class="flex flex-dir-c flex-jc-sa">
          <view class="font-bold font-26">全国洗车点通用</view>
          <view>大平台有保障，一次购买，全国通用</view>
        </view>
      </view>
      <view class="flex item">
        <image class="item-img" :src="cavansData.icon2Img" mode="scaleToFill" />
        <view class="flex flex-dir-c flex-jc-sa">
          <view class="font-bold font-26">机器故障保险</view>
          <view>如果遇到机器故障无法洗车，则无条件补偿当次消耗</view>
        </view>
      </view>
      <view class="flex item">
        <image class="item-img" :src="cavansData.icon3Img" mode="scaleToFill" />
        <view class="flex flex-dir-c flex-jc-sa">
          <view class="font-bold font-26">保养/美容/维修尽享折扣</view>
          <view>官方不定期将有礼券相送，享受保养/美容/维修等减免</view>
        </view>
      </view>
    </view>
    <view class="qr flex flex-ai-c">
      <!-- <image class="qr-img" :src="cavansData.qrImg" mode="scaleToFill" /> -->
      <tki-qrcode
        :show="true"
        ref="qrcode"
        :val="qrcodeVal"
        :size="160"
		:lv="1"
        :icon="icon"
        :iconSize="14"
        :loadMake="true"
        :showLoading="false"
        @result="qrR"
      />
      <u-line
        direction="col"
        length="60rpx"
        color="rgba(228,206,163,0.8)"
        margin="0 20rpx 0 20rpx"
      ></u-line>
      <view class="flex flex-dir-c flex-jc-sa qr-text">
        <text class="font-30">智洗骑士卡</text>
        <text class="font-24">压码享特权</text>
      </view>
    </view>
    <!-- 分享 -->
    <view class="share flex flex-jc-sb">
      <view
        v-for="(item, i) in shareList"
        :key="i"
        class="flex flex-dir-c flex-ai-c"
        @click.stop="handleShare(item.type)"
      >
        <i-icon
          :icon="item.icon"
          size="90rpx"
          :color="item.color"
          :type="!item.color ? 'multiple' : 'single'"
        ></i-icon>
        <text class="text">{{ item.text }}</text>
      </view>
    </view>
    <button class="btn" @click="cancel">取消</button>
    <!-- 画布，隐藏状态，生成海报图片时用 -->
    <view class="ctx">
      <canvas canvas-id="ctx" style="width: 375px; height: 890px"></canvas>
    </view>
  </view>
</template>
<script>
import { share } from "@/utils/common-api.js";
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";

export default {
  data() {
    return {
      shareList: [
        {
          icon: "iconfenxiangweixin",
          text: "微信",
          color: "#46bb36",
          type: "WXSceneSession",
        },
        {
          icon: "iconfenxiangpengyouquan",
          text: "朋友圈",
          color: "",
          type: "WXSenceTimeline",
        },
        {
          icon: "iconxiazai",
          text: "保存",
          color: "#fbb000",
          type: "download",
        },
      ],
      url: "https://files.yzsheng.com/bussiness/imgs/washCar/washCarShare.jpg",
      // 画布生成需要的数据
      ctx: null,
      cavansData: {
        pageBg: "/static/img/washCar/posterBg.png",
        tipImg: "/static/img/washCar/tipBg.png",
        titleImg: "/static/img/washCar/title.png",
        title2Img: "/static/img/washCar/title2.png",
        vipIcon: "/static/img/washCar/vipIcon.png",
        adImg: "/static/img/washCar/ad.png",
        icon1Img: "/static/img/washCar/vipIcon1.png",
        icon2Img: "/static/img/washCar/vipIcon2.png",
        icon3Img: "/static/img/washCar/vipIcon3.png",
        cardImg: "/static/img/washCar/cardBg.png",
        cardData: "￥1392",
        cardPrice: "￥297",
        number: 8821,
        qrImg: "",
      },
      poster: "", //海报图片
      qrcodeVal: "", // 要生成的二维码值
      icon: "/static/logo/bussinesslogo.png", // 二维码图标
      timer: null, //计时器
      number: 8821,
      isLoading: false,
    };
  },
  onLoad(e) {
    this.getSelfServiceCarWashCardById();
    // if (e.siteId) {
    this.qrcodeVal =
      "https://lineapi.yzsheng.com/carwash_globalche?siteId=" + e.siteId + '&id=' + this.$store.state.user.userInfo.tid;
    // } else {
    //   this.qrcodeVal =
    //     "https://lineapi.yzsheng.com/carwash_globalche?siteId=" +
    //     this.$store.state.userInfoDetail.store.storeId;
    // }
	console.log(this.qrcodeVal)
    this.ctx = uni.createCanvasContext("ctx", this);
  },

  mounted() {
    this.timer = setInterval(() => {
      this.number++;
      this.$set(this.cavansData, "number", this.number);
    }, 3000);
  },

  onShow() {
    if (this.isLoading) {
      uni.hideLoading();
    }
  },

  onUnload() {
    clearInterval(this.timer);
  },

  methods: {
    // 年卡信息
    getSelfServiceCarWashCardById() {
      this.$api.washCar
        .getSelfServiceCarWashCardById({ id: "8" })
        .then((res) => {
          this.cavansData.cardData = "￥" + res.data.normal_Price;
          this.cavansData.cardPrice = "￥" + res.data.sale_Price;
        })
        .catch((err) => {});
    },

    handleShare(type) {
      uni.showLoading({
        title: "正在生成海报...",
        mask: true,
        complete: () => {
          this.isLoading = true;
        },
      });
      this.draw(this.ctx, this.cavansData, () => {
        // 调用生成海报方法
        if (type === "download") {
          this.create("ctx", (res) => {
            this.isLoading = false;
            uni.hideLoading(); // 关闭生成中提示
            // #ifndef H5
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "已保存到相册",
                  duration: 2000,
                });
              },
            });
            // #endif
          });
        } else {
          // 调用生成海报方法
          this.createdPoster(({ baseUrl, url }) => {
            let imgUrl = baseUrl + url; // 图片地址
            console.log(232);
            // 分享方法
            share(
              {
                type: 2,
                imageUrl: imgUrl,
                scene: type,
              },
              (status) => {
                console.log(240);
                this.isLoading = false;
                uni.hideLoading(); // 关闭生成中提示
                if (!status) {
                  uni.showToast({
                    title: "分享失败",
                    duration: 2000,
                  });
                }
              }
            );
          });
        }
      });
    },

    //下载分享海报
    createdPoster(callback) {
      this.create("ctx", (res) => {
        uni.getImageInfo({
          src: res.tempFilePath,
          success: (resFile) => {
            // 上传生成的本地图片
            this.$api.files
              .uploadImg({
                filePath: resFile.path,
              })
              .then((resImg) => {
                console.log("看看图片", resImg);
                callback(resImg); // 回调操作
              })
              .catch((err) => {
                console.log("no:", err);
              });
          },
          fail: (err) => {
            console.log(err);
          },
        });
      });
    },

    // 绘制海报图片
    create(canvasId, callback) {
      uni.canvasToTempFilePath({
        width: 375,
        // height:920,
        canvasId: canvasId,
        success: (res) => {
          console.log("保存成功", res);
          callback(res);
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            title: "生成失败" + err.errMsg,
            duration: 2000,
          });
        },
      });
    },

    cancel() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },

    //二维码转图片
    qrR(res) {
      this.cavansData.qrImg = res;
      console.log("二维码转图片");
      // this.draw(this.ctx, this.cavansData, () => {});
    },

    draw(ctx, data, callback) {
      // 画直线方法，
      let moveline = (start, end) => {
        ctx.moveTo(start.x, start.y);
        ctx.lineTo(end.x, end.y);
        ctx.stroke();
      };

      // 添加设置文本的方法
      let setText = (option) => {
        ctx.setFontSize(option.fontSize);
        ctx.setFillStyle(option.color || "#333333");
        ctx.fillText(option.text, option.textX, option.textY);
      };
      // 黑色背景
      ctx.setFillStyle("#3E3E3E");
      ctx.fillRect(0, 0, 375, 890);

      // 背景图
      ctx.drawImage(data.pageBg, 0, 0, 375, 990);
      // 第一行
      ctx.drawImage(data.tipImg, 15, 10, 345, 25);
      setText({
        fontSize: "11",
        color: "#FFB302",
        text: "办理7迈车全球洗车, 全年预计最高可省30000元",
        textX: 26,
        textY: 26,
      });
      // 智洗骑士卡图片
      ctx.drawImage(data.titleImg, 82, 60, 212, 24);
      //会员卡
      ctx.drawImage(data.cardImg, 15, 99, 345, 172);
      ctx.drawImage(data.vipIcon, 170, 235, 27, 27);
      setText({
        fontSize: "11",
        color: "#E4CEA3",
        text: "年卡会员: " + data.cardData,
        textX: 195,
        textY: 254,
      });
      ctx.setStrokeStyle("#E4CEA3");
      moveline({ x: 244, y: 250 }, { x: 284, y: 250 });
      setText({
        fontSize: "23",
        color: "#E4CEA3",
        text: data.cardPrice,
        textX: 284,
        textY: 254,
      });

      // 会员特权
      ctx.drawImage(data.title2Img, 132, 305, 112, 17);
      // 广告
      ctx.drawImage(data.adImg, 15, 337, 345, 150);
      setText({
        fontSize: "16",
        color: "#E4CEA3",
        text: "购卡即送卫莱士净水器",
        textX: 15,
        textY: 532,
      });
      setText({
        fontSize: "12",
        color: "#fff",
        text: "剩余",
        textX: 265,
        textY: 530,
      });
      setText({
        fontSize: "12",
        color: "#FF2929",
        text: data.number,
        textX: 292,
        textY: 530,
      });

      setText({
        fontSize: "12",
        color: "#fff",
        text: "/10000",
        textX: 320,
        textY: 530,
      });
      setText({
        fontSize: "12",
        color: "#E4CEA3",
        text: "仅限前一万名，送完即止",
        textX: 15,
        textY: 558,
      });
      //套餐卡权限说明
      ctx.drawImage(data.icon1Img, 15, 578, 45, 45);
      setText({
        fontSize: "14",
        color: "#fff",
        text: "全国洗车点通用",
        textX: 70,
        textY: 596,
      });
      setText({
        fontSize: "11",
        color: "#fff",
        text: "大平台有保障，一次购买，全国通用",
        textX: 70,
        textY: 616,
      });
      ctx.drawImage(data.icon2Img, 15, 646, 45, 45);
      setText({
        fontSize: "14",
        color: "#fff",
        text: "机器故障保险",
        textX: 70,
        textY: 664,
      });
      setText({
        fontSize: "11",
        color: "#fff",
        text: "如果遇到机器故障无法洗车，则无条件补偿当次消耗",
        textX: 70,
        textY: 684,
      });
      ctx.drawImage(data.icon3Img, 15, 714, 45, 45);
      setText({
        fontSize: "14",
        color: "#fff",
        text: "全国洗车点通用",
        textX: 70,
        textY: 732,
      });
      setText({
        fontSize: "11",
        color: "#fff",
        text: "大平台有保障，一次购买，全国通用",
        textX: 70,
        textY: 752,
      });
      // 二维码
      this.drawRoundRect(
        ctx,
        15,
        781,
        345,
        90,
        10,
        "rgba(228, 206, 163,0.18)",
        "#E4CEA3"
      );
      ctx.drawImage(data.qrImg, 20, 786, 80, 80);
      ctx.setStrokeStyle("rgba(228,206,163,0.8)");
      moveline({ x: 105, y: 808 }, { x: 105, y: 844 });
      setText({
        fontSize: "16",
        color: "#fff",
        text: "智洗骑士卡",
        textX: 115,
        textY: 816,
      });
      setText({
        fontSize: "14",
        color: "#fff",
        text: "压码享特权",
        textX: 115,
        textY: 846,
      });
      ctx.draw();
      setTimeout(() => {
        callback();
      }, 500);
    },

    // 圆角区域
    drawRoundRect(ctx, x, y, w, h, r, fillColor, borderColor) {
      // ctx.setStrokeStyle("#0f0");
      ctx.beginPath();
      // 左上角
      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
      // 右上角
      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
      // 右下角
      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
      // 左下角
      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
      ctx.closePath();
      // ctx.stroke();
      ctx.setFillStyle(fillColor);
      ctx.fill();
    },
  },

  components: {
    tkiQrcode,
  },
};
</script>
<style lang="scss" scoped>
.pages {
  background: url("../../static/img//washCar/posterBg.png") no-repeat;
  // background-size: 100% 100%;
  padding: 0 30rpx;
  background-color: #000;

  .title-tips {
    height: 50rpx;
    line-height: 50rpx;
    background: rgba(153, 153, 143, 0.5);
    border-radius: 10rpx;
    padding: 0 22rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #ffb302;
  }

  .title {
    margin: 50rpx auto 40rpx;
    text-align: center;
    .image {
      width: 424rpx;
      height: 47rpx;
    }
  }

  .card {
    position: relative;
    height: 340rpx;
    border-radius: 30rpx;
    background: url("../../static/img//washCar/cardBg.png") no-repeat;
    background-size: 100% 100%;
    padding: 0 20rpx 0;

    .card-footer {
      position: absolute;
      bottom: 25rpx;
      right: 25rpx;
      color: #e4cea3;

      .images {
        position: relative;
        bottom: -15rpx;
        width: 55rpx;
        height: 55rpx;
      }

      .text {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
      }

      .through-line {
        text-decoration: line-through;
      }

      .font-46 {
        font-weight: 800;
        font-size: 46rpx;
      }
    }
  }

  .vip {
    text-align: center;
    margin: 68rpx 0 20rpx;

    .img {
      width: 224rpx;
      height: 34rpx;
    }
  }

  .ad-img {
    width: 690rpx;
    height: 280rpx;
  }

  .ad {
    padding-top: 50rpx;
    font-weight: 500;
    color: #e4cea3;

    .color-FF2929 {
      color: #ff2929;
    }

    .ad-sub {
      padding-top: 20rpx;
    }
  }

  .vip-list {
    font-size: 24rpx;
    font-weight: 500;
    color: #fff;
    .item {
      padding-top: 40rpx;
    }
    .item-img {
      width: 90rpx;
      height: 90rpx;
      margin-right: 20rpx;
    }
  }

  .qr {
    margin-top: 49rpx;
    padding: 0 20rpx;
    height: 180rpx;
    border: 2rpx solid #e4cea3;
    // border-radius: 20px;
    background: rgba(228, 206, 163, 0.25);
    font-weight: 500;
    color: #fff;

    .qr-img {
      width: 140rpx;
      height: 140rpx;
      background: #fff;
      // border-radius: 50%;
    }

    .qr-text {
      height: 100rpx;
    }
  }

  .share {
    padding: 50rpx 34rpx 20rpx;
    color: #999;
    font-size: 30rpx;

    .text {
      padding: 15rpx;
    }
  }

  .btn {
    position: relative;
    left: -30rpx;
    width: 750rpx;
    height: 110rpx;
    line-height: 110rpx;
    background: #999999;
    border-radius: 0;
  }
}

.ctx {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>
